<section class="data.id">

  <div class="main-info">


    <div class="name-users">
      <h2 class="name">{{ data.name }}</h2>
      <p class="users">{{ data.users.length }} подписчиков</p>
      <p class="users" *ngIf="committed&&expected">Я иду</p>
      <p class="users" *ngIf="committed&&!expected">участвовал</p>
    </div>

    <p class="desc">{{ data.description }}</p>

    <div *ngIf="isVisible">
      <h3>Описание:</h3>
      <p>{{ data.description }}</p>
      <h3>Продолжительность:</h3>
      <p>{{ data.duration }}</p>
      <h3>Что нужно знать?</h3>
      <p>{{ data.need_to_know }}</p>
      <h3>Зачем приходить?</h3>
      <p>{{ data.reason_to_come }}</p>
      <h3>Целевая аудитория:</h3>
      <p>{{ data.target_audience }}</p>
      <h3>Что будет происходить?</h3>
      <p>{{ data.will_happen }}</p>
    </div>
  </div>

  <div class="date-time {{expected}}">
    <p class="time">{{ startTime }}</p>
    <p *ngIf="expected" class="location">{{ data.location }}</p>
    <p *ngIf="!expected" class="location">Проведено</p>
  </div>

  <div class="icon-owner">
    <svg width="20" height="20" viewBox="0 0 48 49" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path
        d="M24 24.6C30.63 24.6 36 19.23 36 12.6C36 5.97001 30.63 0.600006 24 0.600006C17.37 0.600006 12 5.97001 12 12.6C12 19.23 17.37 24.6 24 24.6ZM24 30.6C15.99 30.6 0 34.62 0 42.6V48.6H48V42.6C48 34.62 32.01 30.6 24 30.6Z"
        fill="#B85526"/>
    </svg>
    <p>{{ data.owner.fio }}</p>
  </div>

  <div class="buttons">
    <button (click)="handleIllGo()" class="ax-button btn" *ngIf="expected&&iCanGo&&!committed">Я пойду!</button>
    <button (click)="handleIamNotGoing()" class="ax-button btn" *ngIf="expected&&committed">Я не пойду!</button>
    <button class="ax-button btn" *ngIf="expected&&iCanEdit" data-id="{{data.id}}" (click)="handleEditClick($event)">Редактировать</button>
    <button *ngIf="expected&&iCanEdit" class="ax-button btn delete" data-id="{{data.id}}" (click)="handleDeleteClick($event)">Удалить</button>
    <button class="ax-button btn show-more" (click)="isVisible = !isVisible">
      {{ isVisible ? "∧" : "∨" }}
    </button>
  </div>
</section>
